O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico texto de linha única("input"); o campo de entrada do e-mail será um campo de texto com uma única linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").

Em termos de código HTML, teremos algo assim:

Os elementos estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo for em todos os elementos ; é uma maneira para vincular uma label à um campo do formulário. Este atributo faz referência ao id do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: How to structure an HTML form(en).

No elemento , o atributo mais importante é o atributo type. Esse atributo é extremamente importante porque define a forma como o elemento se comporta. Ele pode mudar radicalmente o elemento, então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo native form widgets. Em nosso exemplo, nós usamos somente o type="text", valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o type="email" que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo Validação de dados de formulário.

Por último, mas não menos importante, observe a sintaxe de e . Esta é uma das esquisitices do HTML. A tag é um elemento que se auto-fecha, o que significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "/" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento você tem que usar o atributo value como este:

Pelo contrário, se você deseja definir o valor padrão de um elemento , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento , como abaixo: